<template>
	<Form :model="drawer" ref="validForm" :rules="ruleValidate">
		<FormItem label="菜单名" label-position="top" prop="menus">
			<Select v-model="drawer.menus" placeholder="请选择所属菜单" multiple>
				<Option v-for="item in menuList" 
						:value="item.id" :key="item.id" >{{item.menuName}}</Option>
			</Select>
		</FormItem>
		
		<FormItem label="功能名" label-position="top" prop="funcName" :error="error.funcName">
			<Input v-model="drawer.funcName" placeholder="请输入功能名称" />
		</FormItem>
		
		<FormItem label="排序" label-position="top" prop="sorted" :error="error.sorted">
			 <InputNumber v-model="drawer.sorted" placeholder=""/>
			 <b style="padding: 0 5px">请输入排序的数字,数字越大,优先级越低</b>
		</FormItem>
		
		<FormItem label="路由地址" label-position="top" prop="url" :error="error.url">
			<Input v-model="drawer.url" placeholder="请输入路由地址,以`/`开头" />
		</FormItem>
		
		<FormItem label="权限标识" label-position="top" prop="remark" :error="error.remark">
			<Input v-model="drawer.remark" placeholder="请输入权限标识,多个单词以英文冒号分割,例如 menu:list" />
		</FormItem>
		
		<FormItem label="状态" label-position="top" prop="state">
		  <Switch size="large" v-model="drawer.state">
			<template #open>
			  <span>启用</span>
			</template>
			<template #close>
			  <span>禁用</span>
			</template>
		  </Switch>
		</FormItem>
	</Form>	
	
	<div class="demo-drawer-footer">
		<Button style="margin-right: 8px" @click="$emit('close-win', false)">关闭</Button>
		<Button type="primary" @click="handlerForm">保存</Button>
	</div>
</template>

<script>
export default {
  props: {
    drawer: {type: Object, required: true} ,
  },
	data() {
		return {
      error: {} , // 用来存储后端校验失败信息
      ruleValidate: {
        menus: [
          {required: true, type: "array", min: 1, message: "菜单至少选择一个", trigger: 'change'},
        ],
        funcName: [
          {required: true, message: "功能名不允许为空", trigger: 'blur'},
          {type: "string", max:100, message: "功能名过长", trigger: 'blur'},
        ],
        sorted: [
          {type: "integer", message: "排序值必须是一个整数", trigger: 'blur'},
        ],
        url: [
          {required: true, message: "功能路由地址不允许为空", trigger: 'blur'},
          {type: "string", pattern: /^\/.*$/, message: "功能路由地址必须以/开头", trigger: 'blur'},
        ],
        remark: [
          {required: true, message: "权限标识不能为空", trigger: 'blur'},
          {type: "string", pattern: /^\w+(:\w+)*?$/, message: "权限标识格式不正确", trigger: 'blur'},
        ],
        state: [
          {type: "boolean", message: "状态必须是一个boolean类型的值", trigger: "blur"}
        ]
      },
			menuList: [],
		}
	},
  watch:{
    drawer: function(newDrawer) {
      this.$api.queryMenusRefFunc(newDrawer.id).then(ret=> {
        if (ret.data.status) {
          this.menuList = ret.data.list ;
          this.drawer.menus = ret.data.list.filter(m => m.state).map(m => m.id);
        }
      })
    }
  },
	emits: ["close-win"],
  methods: {
    handlerForm() {
      this.error = {} ;
      // 校验表单参数
      this.$refs.validForm.validate(valid => {
        if (valid) {
          if (this.drawer.id == null) {
            // 调用默认插槽中定义的保存方法
            this.handlerSave();
          }else{
            // 调用默认插槽中定义的更新方法
            this.handlerUpdate();
          }
        }
      })
    },
    handlerSave(){
       this.$api.addFunc(this.drawer).then(ret => {
          if (ret.data.status) {
            this.$tips.success("添加功能成功") ;
            this.$emit("close-win" , "save");
          }else{
            this.error = ret.data.error ;
          }
       })
    },
    handlerUpdate(){
      this.$api.updateFunc(this.drawer).then(ret => {
        if (ret.data.status) {
          this.$tips.success("修改功能成功") ;
          this.$emit("close-win" , "update");
        }else{
          this.error = ret.data.error ;
        }
      })
    },
    resetValidForm() {
      this.$refs.validForm.resetFields();
      this.error = {} ; // 清空错误失败原因
    },
  }
	
}
</script>

<style scoped>
.icon {
	vertical-align: middle;
	margin: 0 3px;;
}
.demo-drawer-footer{
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	border-top: 1px solid #e8e8e8;
	padding: 10px 16px;
	text-align: right;
	background: #fff;
}
</style>